<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>部门管理</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<script src="../public/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<%if(session.getAttribute("user")==null){ %>
    <script>
		window.top.location.replace("../login.jsp");
	</script>
<%}%>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	<legend><h2>部门管理</h2></legend>
</fieldset>
<table class="layui-hide" id="demo" lay-filter="form"></table>
<script type="text/html" id="search">
  	<button class="layui-btn" name="search" data-type="reload"  lay-event="merge">部门合并</button>
	<button class="layui-btn" name="search" data-type="reload"  lay-event="add">新建部门</button>
</script>
<!-- 	删除 -->
<script type="text/html" id="barDemo">
	<button type="button" class="layui-btn layui-btn-sm" lay-event="delete">
    	<i class="layui-icon">&#xe640;</i>
  	</button>
</script>
<script type="text/javascript">
layui.use(['jquery','layer','table'],function(){
	var table = layui.table;
	var $ = layui.jquery;
	var layer = layui.layer;
	
	var tableIns = table.render({
		elem: '#demo'
	    ,height: 530
	    ,url: '../AdminServlet?button=1' //数据接口
    	,toolbar: '#search'
	    ,page: true //开启分页
	    ,defaultToolbar:["print"]
	    ,cols: [[ //表头
	      {type: 'checkbox', fixed: 'left'}
	      ,{field: 'deptid', title: '部门编号', width:120, sort: true,fixed: 'left'}
	      ,{field: 'deptname', title: '部门名', width:180,edit:'text'}
	      ,{field: 'rolename', title: ' 职位名', width:100}
	      ,{field: 'basewages', title: '部门初始底薪', width:150,edit:'text'} 
	      ,{field: 'overtimestandard', title: '部门初始加班薪资', width: 150,edit:'text'}
	      ,{field: 'leavestandard', title: '部门初始请假扣薪', width: 150,edit:'text'}
	      ,{field: 'absentstandard', title: '部门初始旷工扣薪', width: 190,edit:'text'}
	      ,{field: 'createtime', title: '创建时间', width: 200}
	      ,{field: 'updatetime', title: '最后更新时间', width: 200, sort: true}
	      ,{fixed: 'right', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
	    ]]
	});
	//单元格编辑事件
	table.on('edit(form)', function(obj){
		var deptid = obj.data.deptid;
		var roleid = obj.data.roleid;
		var type = obj.field;
		var newvalue = obj.value;
// 		console.log(obj);
		$.ajax({
			url:'../AdminServlet?button=2&type='+type+'&newvalue='+newvalue+'&deptid='+deptid+'&roleid='+roleid
			,type:'post'
			,async:false
			,success:function(res){
//					console.log(res);
				layer.msg(res);
				tableIns.reload({});
			}
		})
	});
	//头部工具监听
	table.on('toolbar(form)', function(obj){
//		  var checkStatus = table.checkStatus(obj.config.id);
		  var data = obj.data;
		  var layEvent = obj.event;
		  switch(obj.event){
		  	case 'merge':
		  		layer.msg("合并");
		  		var mergeDept = layer.open({
		  			type:2
		  			,title:"部门合并"
		  			,area: ['650px', '420px']
		  			,maxmin:true
		  			,shadeClose:true
		  			,content:"03mergeDept.jsp"
		  			,end:function(){
			  				 $(".layui-laypage-btn").click();	//刷新页面
		  			}
		  		})
// 		    	tableIns.reload({});
		    	break;
		  	case 'add':
		  		var addDept = layer.open({
		  			type:2
		  			,title:"新建部门"
		  			,area: ['800px', '600px']
		  			,maxmin:true
		  			,shadeClose:true
		  			,content:"02addDept.jsp"
		  			,end:function(){
			  				 $(".layui-laypage-btn").click();	//刷新页面
		  			}
		  		})
			}
	  });
	//行级工具监听
	table.on('tool(form)',function(obj){
//		console.log(obj);
		var data = obj.data;
		if(obj.event == 'delete'){
			layer.confirm('确定删除<span style="color:red;">'+data.deptname+'</span>么', {icon: 5, title:'提示'}, function(index){
	            obj.del(); //删除对应行（tr）的DOM结构
	            layer.close(index);
	            $.ajax({
					url:'../AdminServlet?button=3&deptid='+data.deptid
					,type:'post'
					,async:false
					,success:function(res){
//	 					console.log(res);
						layer.msg(data.deptname+"  <span style='color:#FFB800;'>" + res + "</span>");
					}
				});
			});
		}
	});
	//table复选框列监听
	table.on('checkbox(form)', function(obj){
	  console.log(obj); //当前行的一些常用操作集合
	  console.log(obj.checked); //当前是否选中状态
	  console.log(obj.data); //选中行的相关数据
	  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
	});
});
</script>
</body>
</html>